.raw-content {
  word-wrap: break-word;

  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }

  & a {
    color: var(--color9);
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }

  & img {
    max-width: 100%;
    max-height: 300px;
  }

  & blockquote {
    padding: 12px 8px 12px 16px;
    border-left: 2px solid;
    border-left-color: var(--color45);
  }

  & p,
  & blockquote {
    margin: 0.5rem 0;
  }

  & table {
    display: block;
    overflow: auto;
    border-spacing: 0;
    border-collapse: collapse;

    & th {
      text-align: left;
      font-weight: 600;
    }

    & th,
    & td {
      padding: 6px 13px;
      border: 1px solid var(--color16);
    }

    & tr {
      border-top: 1px solid var(--color43);
      background-color: var(--color6);

      &:nth-child(2n) {
        background-color: var(--color21);
      }
    }
  }

  & sup,
  & sub {
    & sup,
    & sub {
      vertical-align: middle; /* to prevent some visual cheats */
    }
  }

  & hr {
    border-width: 0 0 1px 0;
    border-color: var(--color21);
  }

  & code {
    background-color: var(--chroma-bg);
    border-radius: 3px;
    color: var(--chroma-base);
    line-height: 1.45;
    margin: 0;
    overflow: visible;
    padding: 0.05em 0.3em;
    font-size: 85%;
  }

  & pre {
    padding: 0.75em 1em;
    overflow-x: auto;
    overflow-y: hidden;
    tab-size: 2;
    font-size: 85%;
    line-height: 1.45;
    border-radius: 3px;
    background-color: var(--chroma-bg);
  }

  /* Syntax Highlight Colors */
  & pre > code {
    font-size: 100%;
    padding: 0;
    color: var(--chroma-base);
    background-color: transparent;

    /* Comments */
    & .c1,
    & .cm,
    & .c,
    & .ch,
    & .cp,
    & .cpf,
    & .cs {
      color: var(--chroma-c);
    }

    & .ge {
      font-style: italic;
    }

    & .gr,
    & .gs {
      font-weight: 700;
    }

    & .kd {
      color: var(--chroma-07);
    }

    & .kn,
    & .k,
    & .kc,
    & .kp,
    & .kr,
    & .kt,
    & .ow {
      color: var(--chroma-01);
    }

    & .nb,
    & .nc {
      color: var(--chroma-02);
    }

    & .bp,
    & .n,
    & .na,
    & .fm,
    & .nd,
    & .ne,
    & .nf,
    & .ni,
    & .nl,
    & .nn,
    & .no,
    & .nt,
    & .nv,
    & .nx,
    & .py,
    & .vc,
    & .vg,
    & .vi,
    & .vm {
      color: var(--chroma-03);
    }

    & .dl,
    & .il,
    & .l,
    & .ld,
    & .m,
    & .mb,
    & .mf,
    & .mh,
    & .mi,
    & .mo,
    & .s,
    & .s1,
    & .s2,
    & .sa,
    & .sb,
    & .sc,
    & .sd,
    & .se,
    & .sh,
    & .si,
    & .sr,
    & .ss,
    & .sx {
      color: var(--chroma-04);
    }

    & .g,
    & .gd,
    & .ge,
    & .gh,
    & .gi,
    & .gl,
    & .go,
    & .gp,
    & .gr,
    & .gs,
    & .gt,
    & .gu {
      color: var(--chroma-06);
    }
  }
}

.dark .raw-content {
  /* Syntax Highlight Colors */
  --chroma-bg: rgba(255, 255, 255, 0.05);
  --chroma-base: #a0b2b2;
  --chroma-c: #586e75;
  --chroma-01: #9ef203;
  --chroma-03: rgb(80, 180, 252);
  --chroma-05: #a7ec07;
  --chroma-06: #ed403d;
  --chroma-07: #a1e6fb;

  & blockquote {
    border-left-color: var(--color44);
  }

  & table {
    & th,
    & td {
      border: 1px solid var(--color24);
    }

    & tr {
      background-color: var(--color8);

      &:nth-child(2n) {
        background-color: var(--color23);
      }
    }
  }

  & hr {
    border-color: var(--color22);
  }
}
